<template>
  <div  class="horizontal-scrolling-text-container" style="display: flex" @mouseover="stopScrolling" @mouseout="startScrolling">
    <div style="flex: 1;" class="is-unlock-box">
        <i class="iconfont icon-gonggao "></i>
    </div>
    <div ref="text"  class="scrolling-text"  :style="{ transform: `translateX(${scrollPosition}px)`,flex: `1`}" @click="handleClick">
   <el-tag :type="notice.noticeType === '1' ? 'primary' : 'warning'"  effect="dark">{{ notice.noticeType === '1' ? '通知' : '公告'}}
   </el-tag>
      {{ notice.noticeTitle }}
      （点击查看）
    </div>

  </div>
</template>

<script>

import {listNotice} from "@/api/system/notice";

export default {
  name: 'RollingText',
  data() {
    return {
      title: '//at.alicdn.com/t/c/font_4492811_uplku1msho.css',
      text: '这是要水平滚动的文字这是要水平滚动的文字这是要水平滚动的文字这是要水',
      scrollPosition: 0,
      speed: 1, // 控制滚动速度
      intervalId: null,
      isScrolling: true,
      notice: {
        noticeTitle: '',
        noticeType: '',
        noticeContent: ''
      },
      noticeList: [],
      index: 0
    };
  },
  created() {
    this.getNotice();//获取公告信息
  },
  mounted() {
    this.scrollPosition = this.$refs.text.offsetWidth;
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    startScrolling() {
        //设置为总长度
        this.intervalId = setInterval(() => {
          this.scrollPosition -= this.speed;
          //预留类型
          if (this.scrollPosition < (-this.$refs.text.offsetWidth + 40)) {
            //换文字
            this.scrollPosition = this.$refs.text.offsetWidth + 40;
            if (this.index < this.noticeList.length - 1) {
              this.index++;
              this.notice = this.noticeList[this.index];
            } else {
              this.index = 0;
              this.notice = this.noticeList[this.index];
            }
          }
        }, 1000 / 60); // 每秒更新60次，可以根据需要调整


    },
    stopScrolling() {
      clearInterval(this.intervalId);
    },
    handleClick() {
      this.$modal.alert(this.notice.noticeContent);
    },
    getNotice() {
      //获取通知
      listNotice().then(response => {
        this.noticeList = response.rows;
        this.notice = this.noticeList[this.index];
      })
    }
  },
};
</script>

<style scoped>
.horizontal-scrolling-text-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%; /* 容器宽度，可以根据需要调整 */
}

.scrolling-text {
  position: static;
  transition: transform 0.1s ease-out; /* 添加过渡效果 */
  margin-left: 10px;
}
/* 宝箱动画 */
@keyframes zy {
  10% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}

.is-unlock-box {
  /*@include bgimage("./images/game/icon-box.png");*/
  animation: zy 2.5s 0.15s linear infinite;
  -moz-animation: zy 2.5s 0.15s linear infinite; /* Firefox */
  -webkit-animation: zy 2.5s 0.15s linear infinite; /* Safari and Chrome */
  -o-animation: zy 2.5s 0.15s linear infinite; /* Opera */
}



</style>
